<template>
  <div class="world">
    <head-nav></head-nav>
    <van-row class="contentBox">
      <van-col span="7" class="contentLf">
        <!-- 左侧 -->
        <left-nav></left-nav>
        <!--  -->
      </van-col>
      <van-col span="17" class="contentRg">
        <!-- 右侧栏 -->
        <router-view :isShow="isShow"></router-view>
        <!--  -->
      </van-col>
    </van-row>
    <botton-ele class="van-tabbar-item--active"></botton-ele>
  </div>
</template>

<script>
// 底部导航组件
import bottonEle from "../components/common/botton.vue";
// 头部导航
import headNav from "../components/detCla/headNav.vue";
// 左侧导航
import leftNav from "../components/detCla/leftNav.vue";
// 右侧内容
import rigthContent from "../components/detCla/content.vue";

export default {
  data() {
    return {
      infoList: [],
      isShow: 0,
      active: 1,
      // vue-scroller插件数据
      status: "all",
      orderList: [],
      page: 0,
      all_page: 1,
    };
  },
  components: {
    headNav,
    leftNav,
    rigthContent,
    bottonEle,
  },
  methods: {
    // 接收左侧组件传值
    faShowRigth(val) {
      this.isShow = val;
    },
  },
  created() {
    // 所有商品信息
    let info = {
      type: "get",
      url: "/category/data",
    };

    this.$netWork(info).then((res) => {
      if (res.data.status === 0) {
        this.infoList = res.data.data;
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.world {
  width: 100%;
  height: 100%;

  .contentBox {
    height: calc(100% - 106px);
    padding-top: 60px;
  }
  .contentLf,
  .contentRg {
    height: 100%;
  }

  .van-tabbar-item--active {
    color: skyblue;
  }
}
</style>
